<template>
  <div class="content">
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      circular
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <div class="swiper-item">
          <image :src="item.url" alt="" mode="scaleToFill" />
        </div>
      </swiper-item>
    </swiper>

    <!-- 信息框 -->
    <div class="info-box">
      <uni-row>
        <uni-col :span="24">
          <div class="school-name">{{ hospital.name }}</div>
        </uni-col>
      </uni-row>
      <uni-row>
        <uni-col :span="6">
          <div class="info-box-title">体检时间</div>
        </uni-col>
        <uni-col :span="18">
          <div class="info-box-detail">
            {{ hospital.time }}
          </div>
        </uni-col>
      </uni-row>
      <uni-row>
        <uni-col :span="6">
          <div class="info-box-title">机构位置</div>
        </uni-col>
        <uni-col :span="18">
          <div class="info-box-detail">
            {{ hospital.address }}
          </div>
        </uni-col>
      </uni-row>
    </div>
    <div class="select-box">
      <uni-row class="row" v-if="userRole == 1 || userRole == 2">
        <uni-col :span="12">
          <div
            class="appointment-box box-border-left box-border-bottom"
            @click="goProductPage()"
          >
            <div class="single-img">
              <image
                src="/static/images/home/yuYue.png"
                alt="体检预约"
                mode="scaleToFill"
              />
            </div>
            <div class="single-title">体检预约</div>
          </div>
        </uni-col>
        <uni-col :span="12">
          <div
            class="appointment-box box-border-bottom"
            @click="goStartExamPage()"
          >
            <div class="single-img">
              <img src="/static/images/home/start.png" alt="开始体检" />
            </div>
            <div class="single-title">开始体检</div>
          </div>
        </uni-col>
      </uni-row>
      <uni-row class="row" v-if="userRole == 1 || userRole == 2">
        <uni-col :span="12">
          <div
            class="appointment-box box-border-left"
            @click="goStatisticPage()"
          >
            <div class="single-img">
              <image
                src="/static/images/home/tongji.png"
                alt="数据统计"
                mode="scaleToFill"
              />
            </div>
            <div class="single-title">数据统计</div>
          </div>
        </uni-col>
      </uni-row>
      <uni-row v-if="userRole == 3">
        <uni-col :span="12">
          <div class="appointment-box box-border-left" @click="goGetWorkPage()">
            <div class="single-img">
              <img src="/static/images/home/renLing.png" alt="任务认领" />
            </div>
            <div class="single-title">任务认领</div>
          </div>
        </uni-col>
        <uni-col :span="12">
          <div class="appointment-box" @click="goStartWork()">
            <div class="single-img">
              <img src="/static/images/home/renWu.png" alt="开始任务" />
            </div>
            <div class="single-title">开始任务</div>
          </div>
        </uni-col>
      </uni-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      swiperList: [
        {
          url: "https://img95.699pic.com/photo/50054/5884.jpg_wh300.jpg!/fh/300/quality/90",
        },
        {
          url: "https://tse3-mm.cn.bing.net/th/id/OIP-C.qb0wjBm7WRO1vD5hxMk9vgAAAA?rs=1&pid=ImgDetMain",
        },
        {
          url: "https://img.51miz.com/Element/00/80/91/95/eeebf928_E809195_85975d8f.jpg",
        },
      ],
      hospital: {
        name: "东北师范大学校医院",
        time: "周一到周五上午7:30-11:00",
        address: "吉林省长春市人民大街5156号",
      },
      // 用户角色
      userRole: undefined, // 1 学生、教职员工 2 医护员工
    };
  },
  onLoad() {
    this.userRole = this.$store.state.user.roles;
  },
  methods: {
    // 跳转 体检套餐
    goProductPage() {
      uni.navigateTo({
        url: "/pages/product/index",
      });
    },
    // 跳转 开始体检 页面
    goStartExamPage() {
      uni.navigateTo({
        url: "/pages/startExam/index",
      });
    },
    // 跳转 任务认领 页面
    goGetWorkPage() {
      uni.navigateTo({
        url: "/pages/getWork/index",
      });
    },
    // 跳转 开始任务 页面
    goStartWork() {
      uni.navigateTo({
        url: "/pages/startWork/index",
      });
    },
    // 跳转 数据统计 页面
    goStatisticPage() {
      uni.navigateTo({
        url: "/pages/statistic/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 300rpx;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}
.swiper-item image {
  width: 100%;
  height: 100%;
}

.info-box {
  height: fit-content;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  padding: 0.625rem;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0.75rem;
  background-color: #fff;
}
.school-name {
  font-size: 1.125rem;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  line-height: 2rem;
}
.info-box-title {
  font-size: 0.875rem;
  padding: 0.25rem;
  line-height: 2rem;
}
.info-box-detail {
  font-size: 0.75rem;
  padding: 0.25rem;
  line-height: 2rem;
}
.select-box {
  height: fit-content;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  padding: 0.625rem;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0.75rem;
  background-color: #fff;
}
.appointment-box {
  height: 20vh;
  padding: 2px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}
.single-img {
  height: 2.5rem;
  width: 2.5rem;
  margin: 4px;
}
.single-img image {
  height: 100%;
  width: 100%;
}

.single-title {
  font-size: 0.875rem;
}
.box-border-left {
  border-right: 1px solid #ebeef5;
}
.box-border-bottom {
  border-bottom: 1px solid #ebeef5;
}
</style>
